<template>
    <div class="insert-tab-box">
        <div class="insert-tab flex-center">
            添加标签
        </div>
        <el-form class="insert-tab-form">
            <el-form-item label="  标签名 :" >

                <el-input v-model="obj.form.tName"></el-input>
            </el-form-item>
            <el-form-item label=" 一级标签 :">
                <el-select v-model="obj.form.cId" filterable placeholder="请选择">
                    <el-option
                            v-for="item in obj.classify"
                            :key="item.cId"
                            :label="item.cName"
                            :value="item.cId"
                            @click="obj.hasCid=!obj.hasCid"
                    >
                    </el-option>
                </el-select>



            </el-form-item>
            <el-form-item label="网络图片">
                <el-input v-model="obj.form.image"></el-input>
                <el-image :src="obj.form.image" style="width:150px;object-fit: cover;margin-top: 50px;border: 2px solid grey"></el-image>
            </el-form-item>

            <el-form-item label="显示 : ">
                <el-switch
                        v-model="obj.form.tPublish"
                        active-color="#42b983"
                        inactive-color="#ff4949"
                        active-value=1
                        inactive-value=0
                        active-text="显示"
                        inactive-text="隐藏"
                        :width="80"
                >
                </el-switch>
            </el-form-item>

            <el-button style="margin-top:50px" @click="submitTab" >提交</el-button>

        </el-form>
    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import axios from 'axios'
    import {useRoute, useRouter} from "vue-router";
    import {errorMessage, rejectMessage} from "@/assets/js/utils";
    export default {
        name: "InsertTab",
        setup(){
            let route=useRoute()
            let router=useRouter()
            let obj=reactive({
                form:{
                    tId:0,
                    tName:"",
                    cId:"请选择分类标签",
                    image:"",
                    tPublish:"1"
                },
                hasCid:false,
                classify:[]
            })


            function getAxiosClassify(){
                return axios.get("/api/classifys").then(resp=>resp.data)
            }
            async function setClassify(){
                const data=await getAxiosClassify()
                if(data.code===200){
                    obj.classify=data.data
                }
                else {
                    alert(data.msg)
                }
            }

            function check() {
                if(obj.form.tName.length<1){
                    alert("请输入标签名");
                    return false
                }
                if(!obj.hasCid){
                    alert("请选择一级标签");
                    return false
                }
                return true
            }

            function insertTab() {
                axios.post("/api/ylb/tab/insert",{
                    tName:obj.form.tName,
                    cId:obj.form.cId,
                    tImage:obj.form.image,
                    tPublish:Number(obj.form.tPublish)
                },{
                    headers:{
                        token:localStorage.getItem("token")
                    }
                }).then(resp=>{
                    if(resp.data.code===200){
                        alert("添加成功")
                        obj.form.cId="请选择分类"
                        obj.form.tName=""
                        obj.form.image=""
                        router.push("tabController")
                    }else{
                        if(rejectMessage(resp)){

                        }else{
                            errorMessage("添加失败:"+resp.data.msg)
                        }

                    }
                })
            }
            function  updateTab() {
                axios.post("/api/ylb/tab/update",{
                    tId:obj.form.tId,
                    tName:obj.form.tName,
                    cId:obj.form.cId,
                    tImage:obj.form.image,
                    tPublish:Number(obj.form.tPublish)
                },{
                    headers:{
                        token:localStorage.getItem("token")
                    }
                }).then(resp=>{
                    if(resp.data.code===200){
                        alert("修改成功")
                        router.push("tabController")
                    }else{
                        if(rejectMessage(resp)){

                        }else{
                            errorMessage("修改失败:"+resp.data.msg)
                        }

                    }
                })
            }

            function submitTab(){
                if(check()){
                   // 检查通过

                    if(obj.form.tId!==0){
                        // 修改
                        updateTab()
                    }else{
                        // 新增
                        insertTab()
                    }
                }
            }

            let getRouterTab=()=>{
                let tabStr = route.params.tab;
                if(tabStr!=null){
                    let tab=JSON.parse(tabStr)
                    obj.form.tId=tab.tId
                    obj.form.tName=tab.tName
                    obj.form.cId=tab.cId
                    obj.form.image=tab.tImage
                    obj.form.tPublish=String(tab.tPublish)
                    obj.hasCid=true
                }
            }


            onMounted(async ()=>{
                await setClassify()
                await getRouterTab()
            })

            return{
                obj,
                submitTab,


            }
        }
    }
</script>

<style scoped lang="less">

    .insert-tab-box{
        width: 100%;
        height: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        .insert-tab{
            width: 100%;
            height: 200px;
           font-size: 25px;
        }
        .insert-tab-form{

            width: 30%;
            height: 50%;
            background-color: #efefef;
            padding: 100px 300px 0 300px;
        }
    }
</style>